<template>
	<view class="container">
		<view class="line"></view>
		<view class="cases-listview" v-if="ishavedata==1">
			<scroll-view :style="{height:scrollViewheight+'rpx'}" style="width: 100%;" scroll-y="true">
				<view class="case-item" v-for="(caseitem,caseindex) in caseList" :key="caseitem.id">
					<view class="case-itemtop">
						<u-avatar :src="caseitem.userPortrait" size="90"></u-avatar>
						<view class="case-itemtop-right">
							<text class="case-authorname">{{caseitem.name}}</text>
							<text class="case-pubtime">{{caseitem.creationTime}}</text>
						</view>
					</view>
					<view class="case-content">
						<text>{{showcaseText(caseindex)}}</text>
						<text class="showall" v-on:click="showAlltexts(caseindex)" v-if="!isShowall[caseindex]">展开</text>
					</view>
					<view class="case-images" :class="{'oneimg':caseitem.img.split(',').length==1,'twoimg':caseitem.img.split(',').length==2,'moreimg':caseitem.img.split(',').length>2}">
						<image :src="caseimage" mode="" v-for="(caseimage,imagesindex) in caseitem.img.split(',')" v-on:click="previewCaseImages(caseindex,imagesindex)"></image>
					</view>
					<view class="case-add">
						<u-icon name="/static/position-icon.png" size="30"></u-icon>
						<text>{{caseitem.address}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="nohavedata" v-if="ishavedata==0">
			<u-empty text="数据为空" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {getWorkercases} from '@/apis/request.js';
	export default {
		data() {
			return {
				scrollViewheight:0,
				caseList:[],
				isShowall:[],
				workerid:'',
				ishavedata:-1
			}
		},
		created() {
			this.scrollViewheight=uni.getSystemInfoSync().windowHeight/uni.getSystemInfoSync().windowWidth*750-15;
		},
		onLoad(options) {
			this.workerid=options.workerid;
			this.requestCaselist();
		},
		methods: {
			showAlltexts(index){
			      this.$set(this.isShowall,index,true);
			},
			previewCaseImages(caseindex,imagesindex){
				const that=this;
				console.log(that.caseList[caseindex].img)
				uni.previewImage({
					current:imagesindex,
					urls:that.caseList[caseindex].img.split(','),
					indicator:"default"
				})
			},
			requestCaselist(){
				this.$http({
					url:getWorkercases,
					data:{
						masterId:this.workerid
					},
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						if(res[1].data.data.length>0){
							this.ishavedata=1;
						}else{
							this.ishavedata=0;
						}
						this.caseList=res[1].data.data;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			}
		},
		computed:{
			showcaseText(){
				 return (index)=>{
					 if(this.isShowall[index] || this.caseList[index].content.length<=70)
					 {
						 const isShowall=this.isShowall;
						 isShowall[index]=true;
						 this.isShowall=isShowall;
						 return this.caseList[index].content;
					 }else{
						 return this.caseList[index].content.substr(0,69)+'...'
					 }
				 }
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		.line{
			width: 100%;
			height: 15rpx;
			background-color: rgba(243, 243, 243, 1);
		}
		.cases-listview{
			width: 680rpx;
			height: auto;
			margin: auto;
			.case-item{
				width: 100%;
				height: auto;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #F1F1F1;
				.case-itemtop{display: flex;align-items: center;width: 100%;height: auto;}
				.case-itemtop-right{margin-left: 20rpx;flex: 1;}
				.case-authorname{flex: 1;font-size: 30rpx;display: block;}
				.case-pubtime{font-size: 25rpx;color: #888;flex: 1;display: block;margin-top: 10rpx;}
				.case-content{width: 100%;height: auto;margin-top: 20rpx;font-size: 28rpx;}
				.showall{color: #2979FF;}
				.case-add{
					display: flex;
					width: 100%;
					text{flex: 1;font-size: 26rpx;color: #888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left: 10rpx;}
					margin-top: 20rpx;
				}
			}
			.case-images{width: 100%;height: auto;margin-top: 20rpx;display: flex;flex-wrap: wrap;justify-content: space-between;}
			.oneimg image{
				width: 400upx;
				height: 500upx;
			}
			.twoimg image{
				width: 340upx;
				height: 250upx;
			}
			.moreimg image{
				width: 220upx;
				height: 235upx;
			}
		}
		.nohavedata{
			width: 680rpx;
			height: auto;
			margin: auto;
		}
	}
</style>
